<template>
    <div>
        <el-dialog v-model="props.ProDialog" title="" @close="handleClose" :style="{ width: '80%' }">

            <div style="text-align: center; margin-bottom: 40px;">
                <span style="font-size: 18px; font-weight: normal;">物料产品选择</span>
            </div>

            <div>
                <el-row :gutter="24">
                    <el-col :span="4">
                        <div class="left-column">
                            <el-form :model="form" label-width="20px">
                                <el-form-item>
                                    <el-input v-model="form.materialName" :prefix-icon="Search" clearable
                                        placeholder="请输入分类名称"></el-input>
                                </el-form-item>
                            </el-form>

                            <el-tree :data="data" :props="defaultProps" default-expand-all :expand-on-click-node="false"
                                @node-click="handleNodeClick"></el-tree>
                        </div>
                    </el-col>

                    <el-col :span="20">
                        <div>
                            <el-form :model="form" label-width="100px">
                                <el-row :gutter="24">
                                    <el-col :span="8">
                                        <el-form-item label="物料编码" :class="{ 'bold-label': true }">
                                            <el-input v-model="form.materialProductCode"
                                                placeholder="请输入物料编码"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="物料名称" :class="{ 'bold-label': true }">
                                            <el-input v-model="form.productName" placeholder="请输入物料名称"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item>
                                            <el-button :icon="Search" type="primary" @click="onSearch">搜索</el-button>
                                            <el-button :icon="Refresh" plain @click="onReset">重置</el-button>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>

                            <!-- 表格组件 //@row-click="handleRowClick"：选中table行-->
                            <el-table :data="tableData" style="width: 100%;">
                                <el-table-column label="物料编码" align="center">
                                    <template #default="scope">
                                        <el-radio v-model="selectedRow" :label="scope.row.materialProductCode"
                                            @change="selectRow(scope.row)">
                                            <span></span>
                                        </el-radio>
                                    </template>
                                </el-table-column><el-table-column prop="productName" label="物料名称" align="center" />
                                <el-table-column prop="specificationAndModel" label="规格型号" align="center" />
                                <el-table-column prop="unitName" label="单位" align="center" />
                                <el-table-column prop="material" label="物料/产品" align="center" v-slot="options">
                                    <span v-if="options.row.material == 0">物料</span>
                                    <span v-if="options.row.material == 1">产品</span>
                                </el-table-column>
                                <el-table-column prop="materialName" label="所属分类" align="center" />
                                <el-table-column prop="creationTime" label="创建时间" align="center" width="190" />
                            </el-table>
                            <!-- 分页组件 -->
                            <div class="pagination">
                                <el-pagination :current-page="form.currentPage" :page-size="form.pageSize"
                                    :page-sizes="pageSizes" :total="pageResult.total"
                                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange" />
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>


            <div style="text-align: center; margin-top: 40px;">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="handleCancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Search, Refresh } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { findmaterialManagement, findMaterial } from '@/apis/xms/index';
const props = defineProps(['ProDialog']);
const emit = defineEmits(['close-dialog', 'rowDataP']);
const rowDataP = ref({});//表格选中行（用于存储选中的行数据）
const selectedRow = ref(null);
// 用于跟踪当前选中的行ID
const selectedRowId = ref(null);
let data = ref([]);
const form = ref({
    currentPage: 1,
    pageSize: 10,
    materialProductCode: '',
    productName: '',
    materialId: 1,
    materialName: '',//物料分类名称
});//查询参数

const defaultProps = {//树形菜单点击事件
    children: 'children',
    label: 'materialName',
    value: 'materialId'
};
const handleNodeClick = async (dara, node, vnode, event) => {
    form.value.materialId = node.data.materialId;
    loadList();
};
const tableData = ref([]);//表格数据
const pageResult = ref([]);//分页数据
const loadList = () => {//刷新数据
    findmaterialManagement(form.value).then(res => {
        pageResult.value = res;
        tableData.value = pageResult.value.records
    });
}
onMounted(async () => {
    data.value = await findMaterial();//树形菜单
    loadList();
})
// 分页大小
const pageSizes = [10, 20, 30, 40, 50]
/**
 * 处理分页大小变化
 * @param size 当前分页大小
 */
const handleSizeChange = async (size) => {
    form.pageSize = size;
    loadList();
}
/**
 * 处理当前页码变化
 * @param currentPage 当前页码
 */
const handleCurrentChange = async (currentPage) => {
    form.currentPage = currentPage
    loadList();
}
//搜索功能
const onSearch = async () => {
    // ElMessage.success('搜索功能已触发')
    loadList();
}
//搜索条件重置
const onReset = async () => {
    Object.keys(form.value).forEach(key => {
        form.value[key] = null;
        form.currentPage = 1,
            form.pageSize = 10,
            form.value.materialId = 1;
    })
    loadList();
}

//弹窗取消事件
function handleCancel() {
    emit('close-dialog');
    onReset();
}
// //获取表格选中的行
// const handleRowClick = (row, event) => {
//     rowDataP.value = row;
// }
//点击圆形按钮选中莫一行触发
const selectRow = (row) => {   //console.log('选中的行数据：', row);
    selectedRowId.value = row.materialNo
    rowDataP.value = row;
}
//提交事件
function handleSubmit() {
    if (selectedRowId.value) {
        emit('rowDataP', rowDataP.value);
        handleClose();
    } else {
        ElNotification.warning({
            title: '提示',
            message: '请至少选择一条数据！',
            type: 'warning',
        })
    }
}
//关闭弹窗
const handleClose = () => {
    emit('close-dialog');
    onReset();
}

onMounted(async () => {
    loadList();
})
</script>

<style scoped>
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    /* 将分页组件对齐到右侧 */
}

::v-deep .bold-label .el-form-item__label {
    font-weight: bold !important;
}
</style>
